三本柱大混戰 # 21 藍色星期一，讓我們把Html比較常用的Meta與head會發生的陷阱說完吧

2019 iT 邦幫忙鐵人賽

DAY 21

Modern Web

大家都在鐵人賽跑JS，這條鹹魚不只翻身還被煎得有點焦了，我們來點實務吧系列第 21 篇

三本柱大混戰 # 21 藍色星期一，讓我們把Html比較常用的Meta與head會發生的陷阱說完吧

2019鐵人賽

theRookie

2018-11-05 20:11:16

3593 瀏覽

分享至

選舉要到啦
最有感的是我月銷隨身包衛生紙都不用買了

雙11要到啦
最有感的是我各家電商購物車東西都想下單

12月要到啦
最無言的是各種哭天搶地光棍的過聖誕跨年

最近小農在用java生成假資料
因為寫後端要寫假資料讓前端去呈現

為何後端頭很痛
假設說今天你要生成兩年的資料
每次把假參數丟進方法裡面跑
兩年的資料生成完一次需要20分鐘

好了，你也測過生成三天的資料
生成兩個禮拜也沒問題
於是乎你開開心心的打算跑兩年

好了，你開始用別的程式檢查資料
你發現holy shit你忘記一個月有時31天有時30天甚至有時28天
於是乎你邏輯改一改

跑一跑，這次你為了確保不要在浪費20分鐘
你只想用10分鐘跑一年
於是乎你又執行了

ㄟ?好像沒問題，於是又開開心心的執行兩年
結果第二年是閏年....

TMD!!!

恩，大概就是這種感覺吧，當然這是最最初階的低級錯
(如果看官們看到這有點心虛，請看倌們好好寫寫虛擬碼，與檢討一下自己)

好的，還是不用生成假資料幹自己的前端親切

(只要客戶不要那邊給你，這個按鈕可以往左移一像素嗎?)

讓我們接著昨天的東西在加點東西繼續說完吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="網站的描述。。。">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
    <meta name="author" content="Runoob">
    <link rel="icon" href="/icon.jpg" type="image/x-icon" />
    <!--1105 start here-->
    <link rel="stylesheet" href="css/cssSource.css">
    <script src="js/your-script.js"></script>

    <!--1105 add-->
    <link rel="import" href="component.html">
    <meta http-equiv="refresh" content="300; url=https://www.google.com.tw/">
    <meta http-equiv="x-dns-prefetch-control" content="on"> 

    <title>Document</title>
</head>
<body>
    
</body>
</html>

< link rel="stylesheet" href="css/cssSource.css">
- 說明:在這個html文檔裡導入外部css文檔
- 經驗:...這個應該每個前端工程師都知道的語法，比較特別的是他即使是在< head>裡面仍然可以給他id與class並用js或著jq去控制他，例如按下某按鈕號直接變更他的herf屬性，就可以在不刷新的情況下直接套用新引入的css
< script src="js/your-script.js"></>
- 說明:在這個html文檔裡導入外部js文檔
- 經驗:...這個應該也是每個前端工程師都知道的語法，沒錯，這個逗號以前幾乎都是用拷的，但因為通常js的導入包相對期他都很大，為了加速載入頁面的html與css先讓使用者可以看到，以經驗來說我們一般會把js的外部導入放在一份html的文檔越後面越好(當然是指在不影響頁面操作與bug的情況下)

接下來就是比較高端的東西了

< link rel="import" href="component.html">
- 說明:直接引入一個外部html檔，包含這個html檔所引入的CSS與JS以及其它一切
- 經驗:如果今天看官們運氣夠好，只需要支援chome那恭喜，您""才能""使用這個東西，有了這東西公用的jquery、VUE、bootstrap等等要不斷重複引用的東西只需要在html裡面引用一次，然後不斷import即可

這篇題外話介紹一個網站:

can i use

為何我們工程師都會說IE為何需要存在呢?
理由很簡單，如果必須套上IE開發，如同踩地雷
console為何報了一堆紅字你都莫名其妙
而這個網站就是告訴看官們，在哪個瀏覽器支援些甚麼東西

好的，那麼我們繼續

< meta http-equiv="refresh" content="300; url=https://www.google.com.tw/">
- 說明:300秒後跳轉到google，如果url沒給的話為重新刷新這個頁面
- 經驗:雖然許多網站不再建議使用這個meta，但"某些銀行"網站header還是有這個，只有打開console把他刪掉，可以不用一直重新登錄，非常方便
< meta http-equiv="x-dns-prefetch-control" content="on">
- 說明:以HTTP來說他會先去預載底下< a>超連結標間的DNS連結，而https需要加上這句才會
- 經驗:有加沒加以現在網路來說感覺起來沒有差別，但如果是用手機上網似乎有，但因為手機無法使用console視窗，所以沒有確切數據可以驗證(我知道fire fox的console可以限制網速，但手邊沒資源而且有點懶)
< title>Document
- 說明:瀏覽器頁籤上面的文字
- 經驗:如果不給甚至IDE還會報錯，然後頁籤會變成網址